<template>
	<el-col :xs="xs" :sm="sm" :md="md" :lg="lg" :xl="xl" class="mb15">
		<slot></slot>
	</el-col>
</template>
<script lang="ts">
	import {
		defineComponent,
		onMounted,
		reactive,
		toRefs,
		watch
	} from 'vue';

	//一行几分就传几
	export default defineComponent({
		name: 'vpCol',
		props: {
			span: {
				type: Number,
				default: 4,
			},
		},
		setup(props) {
			const state = reactive({
				xs: 24,
				sm: 24,
				md: 12,
				lg: 6,
				xl: 6,
			});
			onMounted(() => {
				resizeWidth();
			});

			// 监听岗位id改变，则刷新页面
			watch(()=> props.span, ()=>{
				resizeWidth();
			})

			const resizeWidth = () => {
				switch (props.span) {
					case 4:
						state.xs = 24;
						state.sm = 24;
						state.md = 12;
						state.lg = 6;
						state.xl = 6;
						break;
					case 3:
						state.xs = 24;
						state.sm = 24;
						state.md = 8;
						state.lg = 8;
						state.xl = 8;
						break;
					case 2:
						state.xs = 24;
						state.sm = 24;
						state.md = 12;
						state.lg = 12;
						state.xl = 12;
						break;
					case 1:
						state.xs = 24;
						state.sm = 24;
						state.md = 24;
						state.lg = 24;
						state.xl = 24;
						break;
					default:
						state.xs = 24;
						state.sm = 24;
						state.md = 12;
						state.lg = 6;
						state.xl = 6;
				}
			}


			return {
				...toRefs(state),
			};
		},
	});
</script>
